<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统-图书修改</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/lib/jquery-1.11.0.min.js}"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="inc/top :: div"></div>
    <div th:replace="inc/left :: div"></div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;" id="lay_body">
            <fieldset class="layui-elem-field">
                <legend>图书新增</legend>
                <div class="layui-field-box">
                    <form method="post" th:action="@{/admin/book/editBook}">
                        <div class="layui-form-item">
                            <label class="layui-form-label">书名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" required lay-verify="required" th:value="${book.name}" autocomplete="off" class="layui-input">
                                <input type="hidden" name="id" th:value="${book.id}"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">作者</label>
                            <div class="layui-input-inline">
                                <input type="text" name="author" required lay-verify="required" th:value="${book.author}" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">出版社</label>
                            <div class="layui-input-inline">
                                <input type="text" name="press" required lay-verify="required" th:value="${book.press}" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">价格</label>
                            <div class="layui-input-inline">
                                <input type="text" name="price" required lay-verify="required" th:value="${book.price}" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">出版时间</label>
                            <div class="layui-input-inline">
                                <input type="text" id="pressDate" readonly="readonly" name="pressDate" required lay-verify="required" th:value="${book.pressDate}" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">图书分类</label>
                            <div class="layui-input-inline">
                                <input readonly="readonly" type="text" id="bookTypeName" required lay-verify="required" th:value="${book.bookTypeId}" autocomplete="off" class="layui-input">
                                <input type="hidden" id="bookTypeId" name="bookTypeId" th:value="${book.bookTypeId}"/>
                                <div id="tree" style="display: none;">
                                    <ul id="bookTypeTree"></ul>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">图书图片</label>
                            <div class="layui-input-block">
                                <input type="text" readonly="readonly" id="image" name="image" required lay-verify="required" th:value="${book.image}" autocomplete="off" class="layui-input">
                                <button type="button" class="layui-btn" id="test1">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <a target="_blank" th:href="@{'/image/'+${book.image}}" ><img id="imagesrc" th:width="100" th:height="100" th:src="@{'/image/'+${book.image}}"></a>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">图书简介</label>
                            <div class="layui-input-block">
                                <textarea name="synopsis" th:text="${book.synopsis}" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">图书描述</label>
                            <div class="layui-input-block">
                                <textarea name="description" th:text="${book.description}" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
        </div>
    </div>
    <div th:replace="inc/foot :: div"></div>

</div>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/image/upload' //上传接口
            ,done: function(res){
                //上传完毕回调
                console.info(res);
                $('#image').attr('value',res.image);
                $('#imagesrc').attr('src','/image/'+res.image);
                alert(res.info);
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

    var layer;
    layui.use('layer', function(){
        layer = layui.layer;
    });
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#pressDate' //指定元素
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        $('#menu a').each(function () {
            var aText = $(this).text();
            if ('图书管理' == aText) {
                $(this).parent('dd').addClass('layui-this');
            }
        });

        $('#bookTypeName').on('click',function () {
            $('#tree').css('display','block');
        })


    });



</script>
<script th:inline="javascript">
    /*<![CDATA[*/

    var data = /*[[${bookType.data}]]*/ 'Sebastian';

    /*]]>*/


    layui.use('tree', function () {
        layui.tree({
            elem: '#bookTypeTree' //传入元素选择器
            , nodes: data,
            click: function(node){
                //console.info(node.name);
                 $('#bookTypeId').attr('value',node.id);
                 $('#bookTypeName').attr('value',node.name);
                $('#tree').css('display','none');
            }
        });
    });
</script>
</body>

</html>